:root {
  /* 颜色定义 */
--color-primary: #00B4AC;         
 --color-primary-light: #66D7D2;    
  --color-primary-dark: #008A84;     
 --color-primary-extra-light: #E6F6F5; 
  
  --color-secondary: #FF4081;
  --color-secondary-light: #FF79B0;
  --color-secondary-dark: #C60055;
  
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  --color-danger: #F44336;
  --color-info: #2196F3;
  
  --color-text-primary: #212121;
  --color-text-secondary: #757575;
  --color-text-tertiary: #9E9E9E;
  --color-text-light: #FFFFFF;
  
  --color-background: #F8F9FA;
  --color-surface: #FFFFFF;
  --color-surface-dark: #F5F5F5;
  --color-surface-darker: #EEEEEE;
  
  --color-border: #E0E0E0;
  --color-border-light: #EEEEEE;
  --color-border-dark: #BDBDBD;
  
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-shadow: rgba(0, 0, 0, 0.1);
  
  /* 字体大小 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-xxl: 24px;
  --font-size-xxxl: 28px;
  
  /* 字体粗细 */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  /* 间距 */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 64px;
  
  /* 圆角 */
  --border-radius-xs: 4px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-full: 9999px;
  
  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  
  /* 卡片阴影 */
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  
  /* 按钮阴影 */
  --button-shadow: 0 2px 8px rgba(0, 194, 255, 0.3);
  
  /* 过渡效果 */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
  
  /* 最大宽度 */
  --max-width-xs: 320px;
  --max-width-sm: 480px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --max-width-xl: 1280px;
  --max-width-xxl: 1440px;
  
  /* 响应式断点 */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-xxl: 1536px;
  
  /* 导航高度 */
  --header-height: 56px;
  --bottom-nav-height: 60px;
  
  /* z-index */
  --z-index-header: 100;
  --z-index-bottom-nav: 100;
  --z-index-modal: 200;
  --z-index-toast: 300;
  --z-index-dropdown: 400;
}